'use client'
import './test.css'
import Image from "next/image";
import Link from "next/link";
import Icon from "@/components/icon/Icon"
import { useState, useEffect, useCallback, useRef } from 'react';
import KnowledgeGraph1 from '@/components/knowledgeGraph/KnowledgeGraph'
import getMockData from '@/api/getMockData';
import html2canvas from 'html2canvas';
import type { IconPrefix, IconName } from '@fortawesome/fontawesome-svg-core';
import { useAuth } from '@/hooks/contexts/AuthContext';
import LoginModal from '@/components/LoginModal/LoginModal';

// 定义导航项类型接口
interface NavItem {
    id: number;
    icon: string;
    title: string;
    mainNodeId: string;
}

// 定义图谱节点类型接口
interface Node {
    id: string | number;
    name: string;
    originalName?: string;
    highlightedName?: string;
    type?: string;
    isMain?: boolean;
    x?: number;
    y?: number;
    weight?: number;
    isHighlighted?: boolean;
}

// 定义节点间连接关系类型接口
interface Connection {
    source?: string | number;
    target?: string | number;
    from?: string | number;
    to?: string | number;
    relation?: string;
    weight?: number;
}

// 定义完整图谱数据类型接口
interface GraphData {
    id: number;
    nodes: Node[];
    connections: Connection[];
}

export default function KnowledgeGraph() {
    // 状态管理
    // 搜索框是否获得焦点
    const [searchFocused, setSearchFocused] = useState<boolean>(false);
    // 当前选中的导航项ID，用于高亮显示当前选中的导航
    const [selectedItemId, setSelectedItemId] = useState<number | null>(null);
    // 页面是否加载完成，用于控制加载动画
    const [isLoaded, setIsLoaded] = useState<boolean>(false);
    // 当前显示的图谱节点数据
    const [nodes, setNodes] = useState<Node[]>([]);
    // 当前显示的节点间连接关系数据
    const [connections, setConnections] = useState<Connection[]>([]);
    // 当前图谱是否被收藏
    const [isFavorite, setIsFavorite] = useState<boolean>(false);
    // 当前图谱是否被标记为不喜欢
    const [isDisliked, setIsDisliked] = useState<boolean>(false);
    // 当前显示的图谱在所有图谱数据中的索引
    const [currentGraphIndex, setCurrentGraphIndex] = useState<number>(0);
    // 所有图谱数据的集合
    const [allGraphsData, setAllGraphsData] = useState<GraphData[]>([]);
    // 是否正在进行图谱切换过渡动画
    const [isTransitioning, setIsTransitioning] = useState<boolean>(false);
    // 搜索框中的输入内容
    const [searchTerm, setSearchTerm] = useState<string>('');
    // 搜索结果，包含匹配的图谱和节点
    const [searchResults, setSearchResults] = useState<{graph: GraphData, nodes: Node[]}[]>([]);
    // 是否正在进行搜索状态
    const [isSearching, setIsSearching] = useState<boolean>(false);
    // 是否显示登录弹窗
    const [showLoginModal, setShowLoginModal] = useState<boolean>(false);
    // 当前窗口的尺寸，用于响应式布局计算
    const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
    // 移动端菜单是否打开
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState<boolean>(false);
    // 从AuthContext获取的登录状态和相关方法
    const { isLoggedIn, login, phoneLogin } = useAuth();
    // 图谱容器的DOM引用，用于动画和尺寸计算
    const graphContainerRef = useRef<HTMLDivElement>(null);
    // 应用容器的DOM引用，用于获取容器尺寸
    const appContainerRef = useRef<HTMLDivElement>(null);

    // 导航项数据
    const navItems: NavItem[] = [
        { id: 1, icon: 'fire', title: '热门主题', mainNodeId: 'copper' },
        { id: 2, icon: 'bolt', title: '乌克兰战争', mainNodeId: 'ukraine_war' },
        { id: 3, icon: 'oil-well', title: '油价上涨', mainNodeId: 'oil_rise' },
        { id: 4, icon: 'medal', title: '芯片短缺', mainNodeId: 'chip_shortage' },
    ];

    // 图标状态
    const favoriteIcon = isFavorite ? ['fas', 'heart'] : ['far', 'heart'];
    const dislikeIcon = isDisliked ? ['fas', 'thumbs-down'] : ['far', 'thumbs-down'];

    // 处理收藏和不喜欢状态切换
    const handleFavorite = () => setIsFavorite(prev => !prev);
    const handleDislike = () => setIsDisliked(prev => !prev);

    // 监听窗口大小变化，用于响应式布局
    useEffect(() => {
        const handleResize = () => {
            if (appContainerRef.current) {
                const { width, height } = appContainerRef.current.getBoundingClientRect();
                setWindowSize({ width, height });

                // 当窗口大小变化时重新计算布局
                if (allGraphsData.length > 0 && currentGraphIndex < allGraphsData.length) {
                    const targetGraph = allGraphsData[currentGraphIndex];
                    const nodesWithCoordinates = circularLayout(
                        targetGraph.nodes,
                        width * 0.5,
                        height * 0.5, // 动态调整中心位置
                        Math.min(width, height) * 0.25, // 基于窗口尺寸的动态半径
                        Math.min(width, height) * 0.01
                    );
                    setNodes(nodesWithCoordinates);
                }
            }
        };

        // 初始化尺寸
        handleResize();

        // 监听窗口大小变化
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, [allGraphsData, currentGraphIndex]);

    // 环形布局算法 - 完全响应式
    const circularLayout = (
        nodes: Node[],
        centerX: number,
        centerY: number,
        baseRadius: number,
        expansionFactor: number = 0.01
    ): Node[] => {
        const mainNode = nodes.find(node => node.isMain) || nodes[0];
        const childNodes = nodes.filter(node => node.id !== mainNode.id);
        const childCount = childNodes.length;

        // 设置主节点位置
        mainNode.x = centerX;
        mainNode.y = centerY;

        // 动态调整半径，确保节点不超出容器
        const dynamicRadius = Math.min(
            baseRadius + childCount * expansionFactor * Math.min(windowSize.width, windowSize.height),
            Math.min(centerX, centerY) * 0.8 // 确保不超出容器边界
        );

        const angleStep = childCount > 0 ? (2 * Math.PI) / childCount : 0;

        // 计算子节点位置
        childNodes.forEach((node, index) => {
            const angle = index * angleStep;
            node.x = centerX + dynamicRadius * Math.cos(angle);
            node.y = centerY + dynamicRadius * Math.sin(angle);
        });

        return nodes;
    };

    /**
     * 图谱切换过渡动画处理函数
     */
    const triggerGraphTransition = async (newGraph: GraphData) => {
        if (isTransitioning || !windowSize.width) return;

        setIsTransitioning(true);

        // 添加退出动画
        if (graphContainerRef.current) {
            graphContainerRef.current.classList.remove('graph-transition-in');
            graphContainerRef.current.classList.add('graph-transition-out');
        }

        await new Promise(resolve => setTimeout(resolve, 300));

        // 计算新图谱节点布局 - 基于当前窗口尺寸
        const nodesWithCoordinates = circularLayout(
            newGraph.nodes,
            windowSize.width * 0.5,
            windowSize.height * 0.5,
            Math.min(windowSize.width, windowSize.height) * 0.25,
            Math.min(windowSize.width, windowSize.height) * 0.01
        );

        // 更新节点和连接数据
        setNodes(nodesWithCoordinates);
        setConnections(newGraph.connections);

        // 添加进入动画
        if (graphContainerRef.current) {
            graphContainerRef.current.classList.remove('graph-transition-out');
            graphContainerRef.current.classList.add('graph-transition-in');
        }

        await new Promise(resolve => setTimeout(resolve, 300));
        setIsTransitioning(false);
    };

    /**
     * 切换到上一个图谱
     */
    const handlePrevGraph = async () => {
        if (currentGraphIndex > 0 && !isTransitioning) {
            const newIndex = currentGraphIndex - 1;
            setCurrentGraphIndex(newIndex);
            await triggerGraphTransition(allGraphsData[newIndex]);
        }
    };

    /**
     * 切换到下一个图谱
     */
    const handleNextGraph = async () => {
        if (currentGraphIndex < allGraphsData.length - 1 && !isTransitioning) {
            const newIndex = currentGraphIndex + 1;
            setCurrentGraphIndex(newIndex);
            await triggerGraphTransition(allGraphsData[newIndex]);
        }
    };

    // 下载功能
    const downloadGraphAsImage = async (format: 'png' | 'jpeg') => {
        try {
            const graphContainer = document.querySelector('.graph-wrapper') as HTMLElement;
            if (!graphContainer) {
                alert('未找到图谱容器，请检查页面结构');
                return;
            }

            const downloadBtn = document.querySelector('.btn-download') as HTMLButtonElement;
            if (downloadBtn) {
                downloadBtn.disabled = true;
                const originalIcon = downloadBtn.innerHTML;
                downloadBtn.innerHTML = '<Icon icon={["fas", "spinner", "fa-spin"]} className="download-icon" />';

                const canvas = await html2canvas(graphContainer, {
                    useCORS: true,
                    logging: false,
                    scale: 2,
                    backgroundColor: null
                });

                const imageUrl = canvas.toDataURL(`image/${format}`);
                const link = document.createElement('a');
                link.href = imageUrl;
                link.download = `知识图谱_${new Date().getTime()}.${format}`;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);

                downloadBtn.disabled = false;
                downloadBtn.innerHTML = originalIcon;
            }

        } catch (error) {
            console.error('图片下载失败:', error);
            alert('图片下载失败，请重试');
            const downloadBtn = document.querySelector('.btn-download') as HTMLButtonElement;
            if (downloadBtn) {
                downloadBtn.disabled = false;
            }
        }
    };

    const downloadGraphAsCsv = () => {
        try {
            let nodesCsv = '节点ID,名称,类型,X坐标,Y坐标\n';
            nodes.forEach((node) => {
                const name = node.name ? `"${node.name.replace(/"/g, '""')}"` : '';
                const type = node.type ? `"${node.type.replace(/"/g, '""')}"` : '';
                nodesCsv += `${node.id},${name},${type},${node.x},${node.y}\n`;
            });

            let connectionsCsv = '\n关系ID,源节点ID,目标节点ID,关系类型,权重\n';
            connections.forEach((connection, index) => {
                const source = connection.source || connection.from;
                const target = connection.target || connection.to;
                const relation = connection.relation ? `"${connection.relation.replace(/"/g, '""')}"` : '';
                connectionsCsv += `${index + 1},${source},${target},${relation},${connection.weight || ''}\n`;
            });

            const csvData = nodesCsv + connectionsCsv;
            const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
            const url = URL.createObjectURL(blob);

            const link = document.createElement('a');
            link.href = url;
            link.download = `知识图谱数据_${new Date().getTime()}.csv`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(url);

        } catch (error) {
            console.error('CSV数据下载失败:', error);
            alert('CSV数据下载失败，请重试');
        }
    };

    // 导航项过滤图谱
    const filterGraphByNav = async (mainNodeId: string) => {
        if (isTransitioning) return;

        setIsSearching(false);
        setSearchTerm('');

        // 查找包含指定主节点的图谱
        const targetGraph = allGraphsData.find(graph =>
            graph.nodes.some(node => node.isMain && node.id === mainNodeId)
        );

        if (targetGraph) {
            const targetIndex = allGraphsData.indexOf(targetGraph);
            setCurrentGraphIndex(targetIndex);
            await triggerGraphTransition(targetGraph);
            setSelectedItemId(navItems.find(item => item.mainNodeId === mainNodeId)?.id || null);

            // 在移动设备上点击导航后关闭菜单
            if (window.innerWidth < 768) {
                setIsMobileMenuOpen(false);
            }
        }
    };

    // 搜索处理
    const handleSearch = useCallback((term: string) => {
        setSearchTerm(term);

        if (!term.trim()) {
            setIsSearching(false);
            setSearchResults([]);
            return;
        }

        setIsSearching(true);
        const lowerTerm = term.toLowerCase();
        const results: {graph: GraphData, nodes: Node[]}[] = [];

        allGraphsData.forEach(graph => {
            const matchedNodes = graph.nodes.filter(node => {
                const nodeName = node.name.toLowerCase();
                return nodeName.includes(lowerTerm);
            }).map(node => {
                const regex = new RegExp(`(${term})`, 'gi');
                return {
                    ...node,
                    originalName: node.name,
                    highlightedName: node.name.replace(regex, '<strong>$1</strong>')
                };
            });

            if (matchedNodes.length > 0) {
                results.push({ graph, nodes: matchedNodes });
            }
        });

        setSearchResults(results);

        if (results.length > 0 && windowSize.width) {
            const firstMatch = results[0];
            const nodesWithHighlight = firstMatch.graph.nodes.map(node => ({
                ...node,
                isHighlighted: firstMatch.nodes.some(n => n.id === node.id)
            }));
            const nodesWithCoordinates = circularLayout(
                nodesWithHighlight,
                windowSize.width * 0.5,
                windowSize.height * 0.5,
                Math.min(windowSize.width, windowSize.height) * 0.25,
                Math.min(windowSize.width, windowSize.height) * 0.01
            );
            setNodes(nodesWithCoordinates);
            setConnections(firstMatch.graph.connections);
            setCurrentGraphIndex(allGraphsData.indexOf(firstMatch.graph));
        }
    }, [allGraphsData, windowSize]);

    // 搜索结果点击处理
    const handleSearchResultClick = async (graph: GraphData) => {
        if (isTransitioning || !windowSize.width) return;

        const matchedNodes = searchResults.find(item => item.graph.id === graph.id)?.nodes || [];
        const nodesWithHighlight = graph.nodes.map(node => ({
            ...node,
            isHighlighted: matchedNodes.some(n => n.id === node.id)
        }));

        await triggerGraphTransition({
            ...graph,
            nodes: nodesWithHighlight
        });

        setCurrentGraphIndex(allGraphsData.indexOf(graph));
    };

    // 清除搜索
    const clearSearch = () => {
        setSearchTerm('');
        setIsSearching(false);
        setSearchResults([]);

        if (allGraphsData.length > 0 && windowSize.width) {
            const targetGraph = allGraphsData[currentGraphIndex];
            const nodesWithCoordinates = circularLayout(
                targetGraph.nodes,
                windowSize.width * 0.5,
                windowSize.height * 0.5,
                Math.min(windowSize.width, windowSize.height) * 0.25,
                Math.min(windowSize.width, windowSize.height) * 0.01
            );
            setNodes(nodesWithCoordinates);
            setConnections(targetGraph.connections);
        }
    };

    // 初始化数据
    useEffect(() => {
        // 页面加载动画
        const timer = setTimeout(() => {
            setIsLoaded(true);
        }, 200);

        const fetchData = async () => {
            try {
                const allGraphs: GraphData[] = await getMockData();
                setAllGraphsData(allGraphs);

                if (allGraphs.length > 0 && windowSize.width) {
                    const firstGraph = allGraphs[0];
                    const nodesWithCoordinates = circularLayout(
                        firstGraph.nodes,
                        windowSize.width * 0.5,
                        windowSize.height * 0.5,
                        Math.min(windowSize.width, windowSize.height) * 0.25,
                        Math.min(windowSize.width, windowSize.height) * 0.01
                    );
                    setNodes(nodesWithCoordinates);
                    setConnections(firstGraph.connections);
                    setSelectedItemId(navItems[0].id);
                }

            } catch (error) {
                console.error('数据处理错误:', error);
            }
        };

        fetchData().catch(error => console.error('Error fetching data:', error));
        return () => clearTimeout(timer);
    }, [windowSize]);

    // 图谱索引变化时更新视图
    useEffect(() => {
        if (allGraphsData.length > 0 &&
            currentGraphIndex >= 0 &&
            currentGraphIndex < allGraphsData.length &&
            !isTransitioning &&
            windowSize.width) {

            const targetGraph = allGraphsData[currentGraphIndex];
            const nodesWithCoordinates = circularLayout(
                targetGraph.nodes,
                windowSize.width * 0.5,
                windowSize.height * 0.5,
                Math.min(windowSize.width, windowSize.height) * 0.25,
                Math.min(windowSize.width, windowSize.height) * 0.01
            );

            setNodes(nodesWithCoordinates);
            setConnections(targetGraph.connections);

            const mainNode = targetGraph.nodes.find(node => node.isMain);
            if (mainNode) {
                const matchingNav = navItems.find(item => item.mainNodeId === mainNode.id);
                if (matchingNav) {
                    setSelectedItemId(matchingNav.id);
                }
            }
        }
    }, [currentGraphIndex, allGraphsData, navItems, isTransitioning, windowSize]);

    // 登录弹窗处理
    const openLoginModal = () => {
        setShowLoginModal(true);
        document.body.style.overflow = 'hidden';
    };

    const closeLoginModal = () => {
        setShowLoginModal(false);
        document.body.style.overflow = 'auto';
    };

    // 登录检查包装器
    const withLoginCheck = (handler: () => void | Promise<void>) => {
        return async () => {
            if (!isLoggedIn) {
                openLoginModal();
                return;
            }
            try {
                await handler();
            } catch (error) {
                console.error('操作执行失败:', error);
            }
        };
    };

    return (
        <div ref={appContainerRef} className={`page ${isLoaded ? 'loaded' : ''}`}>
            {/* 背景装饰文字 */}
            <div className="background-text">
                <div className="text-layer">稳网互联</div>
                <div className="text-layer">知识图谱</div>
                <div className="text-layer">Wenidc</div>
                <div className="text-layer">AI</div>
                <div className="text-layer">数据</div>
            </div>

            {/* 移动端菜单按钮 */}
            <button
                className="mobile-menu-toggle"
                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                aria-label={isMobileMenuOpen ? "关闭菜单" : "打开菜单"}
                type="button"
            >
                <Icon icon={isMobileMenuOpen ? ['fas', 'times'] : ['fas', 'bars']} className="menu-icon" />
            </button>

            {/* 主内容区 - 采用左侧导航布局 */}
            <div className='app-container'>
                {/* 左侧导航区 */}
                <aside className={`sidebar ${isMobileMenuOpen ? 'mobile-open' : ''}`}>
                    <div className='logo-container'>
                        <Image
                            src='/images/logo.png'
                            alt='知识图谱 logo'
                            width={100}
                            height={100}
                            className='logo-img'
                        />
                    </div>

                    {/* 左侧搜索框 */}
                    <div className={`search-container ${searchFocused || searchTerm ? 'focused' : ''}`}>
                        <div className='search-input-wrapper'>
                            <Icon
                                icon={['fas', 'search']}
                                className='search-icon'
                            />
                            <input
                                type="text"
                                placeholder="搜索节点或主题..."
                                className='search-input'
                                value={searchTerm}
                                onFocus={() => setSearchFocused(true)}
                                onBlur={() => !searchTerm && setSearchFocused(false)}
                                onChange={(e) => handleSearch(e.target.value)}
                            />
                            {searchTerm && (
                                <button
                                    type="button"
                                    className="clear-search"
                                    onClick={clearSearch}
                                    aria-label="清空搜索"
                                >
                                    <Icon icon={['fas', 'times']} className={'clear-icon'}/>
                                </button>
                            )}
                        </div>

                        {/* 搜索结果 */}
                        {searchFocused && searchTerm && (
                            <div className="search-results">
                                {searchResults.length > 0 ? (
                                    searchResults.map((result, index) => (
                                        <div key={index} className="search-result-group">
                                            <div className="result-graph-title">
                                                {result.graph.nodes.find(n => n.isMain)?.name || `图谱 ${result.graph.id}`}
                                            </div>
                                            <div className="result-nodes">
                                                {result.nodes.map(node => (
                                                    <button
                                                        key={node.id}
                                                        type="button"
                                                        className="result-node"
                                                        onClick={() => handleSearchResultClick(result.graph)}
                                                        dangerouslySetInnerHTML={{
                                                            __html: node.highlightedName || node.name
                                                        }}
                                                    />
                                                ))}
                                            </div>
                                        </div>
                                    ))
                                ) : (
                                    <div className="no-results">
                                        未找到包含「{searchTerm}」的节点
                                    </div>
                                )}
                            </div>
                        )}
                    </div>

                    <nav className='main-nav'>
                        {navItems.map(item => (
                            <Link
                                href="#"
                                key={item.id}
                                className={`nav-link ${selectedItemId === item.id ? 'selected' : ''}`}
                                onClick={(e) => {
                                    e.preventDefault();
                                    setSelectedItemId(item.id);
                                    filterGraphByNav(item.mainNodeId);
                                }}
                            >
                                <Icon icon={['fas', item.icon] as [IconPrefix, IconName]} className='nav-icon' />
                                <span className='nav-text'>{item.title}</span>
                            </Link>
                        ))}
                    </nav>
                </aside>

                {/* 中间图谱展示区 - 占据最大空间 */}
                <main className='main-content'>
                    <div className={'graph-wrapper'}>
                        {isLoaded && (
                            <div
                                ref={graphContainerRef}
                                className="graph-container graph-transition-in"
                            >
                                <KnowledgeGraph1
                                    nodes={nodes}
                                    connections={connections}
                                    highlightedNodeIds={isSearching ?
                                        searchResults.flatMap(r => r.nodes.map(n => n.id)) :
                                        []}
                                    nodeClassName="graph-node"
                                    linkClassName="graph-link"
                                />
                            </div>
                        )}
                    </div>
                </main>

                {/* 右侧功能按钮区 */}
                <aside className='right-sidebar'>
                    <div className="action-buttons">
                        {/* 收藏按钮 */}
                        <button className='icon-btn favorite-btn'
                                aria-label={isFavorite ? "取消收藏" : "收藏"}
                                onClick={withLoginCheck(handleFavorite)}
                                type={"button"}
                                disabled={isTransitioning}
                        >
                            <Icon icon={favoriteIcon as [IconPrefix, IconName]}
                                  className={`favorite-icon ${isFavorite ? 'active' : ''}`} />
                        </button>

                        {/* 不喜欢按钮 */}
                        <button className='icon-btn dislike-btn'
                                aria-label={isDisliked ? "取消不喜欢" : "不喜欢"}
                                onClick={withLoginCheck(handleDislike)}
                                type={"button"}
                                disabled={isTransitioning}
                        >
                            <Icon icon={dislikeIcon as [IconPrefix, IconName]}
                                  className={`dislike-icon ${isDisliked ? 'active' : ''}`} />
                        </button>

                        {/* 分享按钮 */}
                        <button
                            className='icon-btn share-btn'
                            aria-label="分享当前主题"
                            onClick={withLoginCheck(() => {
                                alert('分享功能已触发');
                            })}
                            type={"button"}
                            disabled={isTransitioning}
                        >
                            <Icon
                                icon={['fas', 'share-alt']}
                                className='share-icon'
                            />
                        </button>

                        {/* 下载按钮组 */}
                        <div className="download-dropdown">
                            <button
                                className='icon-btn download-btn'
                                aria-label="下载图谱"
                                type="button"
                                disabled={isTransitioning}
                            >
                                <Icon icon={['fas', 'download']} className='download-icon' />
                            </button>
                            <div className="download-options">
                                <button
                                    className="download-option"
                                    onClick={withLoginCheck(() => downloadGraphAsImage('png'))}
                                    type="button"
                                    disabled={isTransitioning}
                                >
                                    <Icon icon={['fas', 'image']} className="option-icon" />
                                    下载为图片
                                </button>
                                <button
                                    className="download-option"
                                    onClick={withLoginCheck(downloadGraphAsCsv)}
                                    type="button"
                                    disabled={isTransitioning}
                                >
                                    <Icon icon={['fas', 'file-csv']} className="option-icon" />
                                    下载为数据
                                </button>
                            </div>
                        </div>
                    </div>

                    <div className="nav-buttons">
                        {/* 上一个按钮 */}
                        <button
                            className={`control-btn nav-btn prev-btn ${currentGraphIndex === 0 || isTransitioning ? 'disabled' : ''}`}
                            aria-label="上一个主题"
                            onClick={handlePrevGraph}
                            disabled={currentGraphIndex === 0 || isTransitioning}
                            type={'button'}
                        >
                            <Icon icon={['fas', 'arrow-left']} className='btn-icon' />
                        </button>

                        {/* 下一个按钮 */}
                        <button
                            className={`control-btn nav-btn next-btn ${(currentGraphIndex === allGraphsData.length - 1) || isTransitioning ? 'disabled' : ''}`}
                            type={"button"}
                            aria-label="下一个主题"
                            onClick={handleNextGraph}
                            disabled={(currentGraphIndex === allGraphsData.length - 1) || isTransitioning}
                        >
                            <Icon icon={['fas', 'arrow-right']} className='btn-icon' />
                        </button>
                    </div>
                </aside>
            </div>

            {/* 登录弹窗组件 */}
            <LoginModal
                visible={showLoginModal}
                onClose={closeLoginModal}
                login={login}
                phoneLogin={phoneLogin}
                onLoginSuccess={() => {
                    console.log('登录成功');
                }}
            />
        </div>
    )
}